<template>
	<view>
		<awords @finish="drawFinished"></awords>
		<view class="recordlist">
			<view class="recordimg">
				——中奖记录——
			</view>
		</view>
		<view class="main" v-if="data">
			<view style="height: 15rpx;"></view>
			<view class="subject">中奖号码</view>
			<view class="body">
				<maoScroll :data="data" :showNum="showNum" :lineHeight="lineHeight" :animationScroll="animationScroll"
					:animation="animation">
					<template v-slot="{line}">
						<view class="recordbox">
							<view>
								<view>{{line.mobile}}</view>
								<view style="margin-top: 10rpx;font-size: 26rpx;color: #555555;">{{line.create_time|dateFormat}}</view>
							</view>
							<view>
								{{line.desc}}
							</view>
						</view>
						<!-- <view class="line">{{line.author}} 获得 {{line.subject}}</view> -->
					</template>
				</maoScroll>
			</view>
		</view>
		<view class="bottomboximg">
			<image src="../../static/bottom3.png"></image>
		</view>
		<view class="bottombox">
			注：中奖者需留下您的联系方式，工作人员将在您中奖后，次日起的48小时内将话费直接充值到您的手机号码上。如电话号码填写错误，导致话费无法充值，本平台不承担任何责任。
		</view>
	</view>
</template>

<script>
	import awords from '../../components/awords.vue'
	import maoScroll from '../../components/mao-scroll/mao-scroll.vue'
	export default {
		components: {
			awords,
			maoScroll
		},
		data() {
			return {
				showdata: ['item', 'item', 'item', 'item', 'item'],
				title: 'Hello',
				data: [],
				count: 30,
				showNum: 5,
				lineHeight: 140,
				animationScroll: 800,
				animation: 2000,
			}
		},
		filters:{
		            //过滤器 用于格式化时间
		            dateFormat: function(value) {           
		                var date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
		                var year = date.getFullYear();
		                var month = ("0" + (date.getMonth() + 1)).slice(-2);
		                var sdate = ("0" + date.getDate()).slice(-2);
		                var hour = ("0" + date.getHours()).slice(-2);
		                var minute = ("0" + date.getMinutes()).slice(-2);
		                var second = ("0" + date.getSeconds()).slice(-2);
		                // 拼接
		                var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute //+ ":" + second;
		                // 返回
		                return result;
		            },
		        },
		onLoad() {
			this.createData()
			this.getawordlist()
		},
		methods: {
			createData() {
				this.$http({
					url:'api/Answer/prize_log',
					data:{
						token:uni.getStorageSync('token')
					}
				}).then(res=>{
					this.data = res.data
				})
			},
			//接收转盘结束事件
			drawFinished() {

			},
			getawordlist(){
				this.$http({
					url:'api/Answer/user_prize_log',
					data:{
						token:uni.getStorageSync('token')
					}
				}).then(res=>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recordlist {
		.recordimg {
			width: 699rpx;
			height: 105rpx;
			background-image: url(http://wjdc.zxkjnc.com/images/hllhp3.png);
			background-size: 699rpx 105rpx;
			margin: 0 auto;
			align-items: flex-end;
			display: flex;
			justify-content: center;
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #2494DA;
		}
	}

	.main {
		// margin: 30rpx;
		background-color: #FFF;
		// border-radius: 10rpx;
		width: 638rpx;
		margin: -8rpx auto 0rpx auto;
		// border: 1px solid #FF6700;
	}

	.main .subject {
		width: 580rpx;
		height: 58rpx;
		background: #2494DA;
		border-radius: 10rpx;
		margin: 0rpx auto 0 auto;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 58rpx;
		padding: 0 20rpx;
	}

	.main .body {
		padding: 20rpx;
		background-color: #FFFFFF;
		max-height: 540rpx;
		overflow-y: hidden;
	}

	.main .body .line {
		height: 60rpx;
		line-height: 60rpx;
	}
	.recordbox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		height: 140rpx;
		border-bottom: solid 1rpx #EBEBEB;
		margin-top: -10rpx;
	}
	.bottomboximg{
		width: 639rpx;
		height: 32rpx;
		margin: -10rpx auto 60rpx auto;
		image{
			width: 639rpx;
			height: 32rpx;
		}
	}
	.bottombox{
		width: 636rpx;
		height: 15rpx;
		margin: -17rpx auto 60rpx auto;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		// text-indent: 60rpx;
		text-align:justify;
		text-align-last:left;
		
	}
</style>
